<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .li
    {
        width:1000px;
        height:500px;
        margin: auto;
        background-image: url(丽贝卡酱.jpg);
        /*扣一佛祖陪你一起笑*/
    }
    .yadang
    {
        width:100px;
        height:100px;
        position:absolute;
        animation: myfirst 4s linear infinite;
        background-image: url(亚当重锤.png);
    }
	@keyframes myfirst 
    {
        25% {transform: translate(900px,250px)}
        50% {transform: translate(0px,400px);}
        75% {transform: translate(900px,250px);
	}
    100%
    {
		transform: translate(0px,0px);
	}
    }
</style>
<body>

	<div class="li" >
		<div class="yadang"></div>
	</div>
</body>
</html>